<template>
    <view class="main_content" :style="{ backgroundImage: `url(${ossImg('others/2025Autumn/background/bg.png')})` }">
        <view class="mt-60rpx mb-16rpx">
            <image :src="ossImg('others/2025Autumn/logo.png')" mode="widthFix" class="w-240rpx h-105rpx"></image>
        </view>
        <view class="space"></view>
        <view class="outBox">
            <view class="innerBox">
                <view class="biscuit">
                    <image @touchstart="touchStart" @touchend="touchEnd" :src="temp_img" mode="widthFix"></image>
                </view>
                <view class="tishi">
                    <text class="pubfont">长按保存GIF表情包</text>
                    <text class="pubfont">到本地相册</text>
                </view>
                <view class="zhuyi pubfont">*仅供用户个人使用，不得用作其他用途</view>
            </view>
        </view>
        <view class="btn-box">
            <button open-type="share">
                <view class="btn-select">
                   <image mode="aspectFit" :src="ossImg('others/2025Autumn/btn/shareFriend.png')" class="w-[248rpx] h-[95rpx]"></image>
                </view>
            </button>
        </view>
        <view class="btn-again" @click="again">
            <image :src="ossImg('others/2025Autumn/againPlay.png')" mode="widthFix" class="w-138rpx h-32rpx"></image>
        </view>
        <view class="lineModel" :style="'background-image: url(' + cookieConfig.lineBackground + ');'"></view>
        <view class="cloudBg">
            <image :src="ossImg('others/2025Autumn/cloud.png')" mode="widthFix"></image>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { ref } from "vue";
import { ossImg } from "@/utils/utils";
const cookieConfig = ref({});
const temp_img = ref(null);
const longPressTimer = ref(0);
const enterTime = +new Date();
const emdlz = getApp().emdlz;
onLoad(() => {
    const index = uni.getStorageSync('autumnSelectedCookiePatternIndex')
    const config = uni.getStorageSync('autumnConfig');
    temp_img.value = uni.getStorageSync('temp_img');
    cookieConfig.value = config.biscuit[index];
    saveMakeImage();
})
const saveMakeImage = () => {
  console.log('调用接口');
  uni.request({
	url: `${process.env.AUTUMN_BASE_API}onpack/api/autumn/submitMakeImage`,
	method: "POST",
	data: {
	  memberId: getApp().globalData?.user?.memberScore?.memberId || '',
	  imageUrl: temp_img.value
	},
	header: {
	  'Content-Type': 'application/json' // 根据实际接口要求调整
	}
  }).then(res => {
	if (res.data?.code === 200) {
	  console.log(res.data?.data, '交互列表')
	}
  });
}
function again() {
    uni.setStorageSync("autumnSelectedCookiePatternIndex", 0);
    uni.redirectTo({ url: '/campaign/pages/2025Autumn/selectCookiePattern' })
}
function handleLongPress() {
    uni.showLoading({ title: '生成图片中' });
    const cookieIndex = uni.getStorageSync('autumnSelectedCookiePatternIndex')
    if (cookieIndex != null) {
        const indexKeyMap = {
            0: "princess",
            1: "star",
            2: "magic",
            3: "lighthouse",
            4: "travel",
            5: "superman",
        }
        emdlz('track', 'event', `oreo_onpack_2025_interact_${indexKeyMap[cookieIndex]}`, 'press', 'press_save ');
    }
   uni.downloadFile({
	url: temp_img.value,
	success(res){
		// 2. 保存到相册
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePath,
			success: () => {
				uni.hideLoading();
				uni.showToast({ title: '保存成功' });
			},
			fail: (err) => {
				console.log(err)
				 uni.hideLoading();
				// this.handleSaveError(err);
			}
		});
	}
   })
}
function touchStart() {
    longPressTimer.value = setTimeout(() => {
        handleLongPress();
    }, 800); // 800ms触发长按
}
function touchEnd() {
    clearTimeout(longPressTimer.value);
}
onShareAppMessage((e) => {

    const shareObj = {
        title: "快进来！一起DIY你的玩心梦想表情包!", // 默认是小程序的名称(可以写slogan等)
        path: "/campaign/pages/2025Autumn/index", // 默认是当前页面，必须是以‘/’开头的完整路径
        imageUrl: ossImg("others/2025Autumn/shareBiscuit.jpg"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
        success: (res) => {
            // 转发成功之后的回调
            if (res.errMsg == "shareAppMessage:ok") {
            }
        },
        fail: (err) => {
            // 转发失败之后的回调
            console.log("转发失败之后的回调", err);
            if (res.errMsg == "shareAppMessage:fail cancel") {
                // 用户取消转发
                console.log("用户取消转发");
            } else if (res.errMsg == "shareAppMessage:fail") {
                // 转发失败，其中 detail message 为详细失败信息
                console.log("转发失败，其中detail message 为详细失败信息");
            }
        },
        complete: () => {
            console.log("转发结束之后的回调（转发成不成功都会执行）");
        },
    };
    console.log(shareObj);
    return shareObj;
});
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";
@import "@/static/css/autumn/main.less";

.main_content {
    view {
        margin: 0 auto;
        text-align: center;
    }

    .changeFont {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 180rpx;
        z-index: 2;
    }

    .space {
        height: 100rpx;
        display: block;
    }

    font-family: autumn;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding-top: 30px;
    background-size: cover;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}
button{background:none;border:none;}
button::after{border:none;}
.btn-select {
    width: 100%;
    text-align: center;
	border:none;
}

.btn-again {
    padding: 30rpx 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #033dbf;
}
/* 分享页面外框 */
.outBox {
    background: linear-gradient(to bottom, #b892fe, #9380f1, #033dbf) 40% 100%;
    padding: 8rpx;
    border-radius: 50rpx;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.3);
    width: 528rpx;
    transform: translateY(-50rpx);
    position: relative;
    z-index: 100;
}

.innerBox {
    background: linear-gradient(to bottom, #fff, #ffe1ee) 40% 100%;
    padding: 0;
    border-radius: 45rpx;
    box-sizing: border-box;
    padding-bottom:20rpx;
}

.biscuit {
    clear: both;
    width: 100%;
}

.biscuit image {
    width: 87%;
}

.tishi {
    color: #023DBE;
    font-weight: bold;
    padding: 10rpx 0 0;
}

.tishi text {
    display: block;
    text-align: center;
    font-size: 32rpx;
}

.zhuyi {
    color: #515151;
    font-size: 24rpx;
    padding: 20rpx 0 0;
}
</style>
